<template>
  <div>
    <el-row :gutter="24">
      <el-col :span="18">
        <!-- 按钮区域 -->
        <el-button type="primary">添加</el-button>
        <el-button type="success">Excel导入</el-button>
        <el-button type="info">终止</el-button>
        <el-button type="warning">完结</el-button>
      </el-col>
      <el-col :span="6">
        <!-- 搜索框 -->
        <el-input
          class="input-with-select"
          placeholder="请输入内容"
        >
          <el-button
            icon="el-icon-search"
            slot="append"
          ></el-button>
        </el-input>
      </el-col>
    </el-row>

    <!-- 任务列表区域 -->
    <div style="height:570px;overflow:auto">
      <el-table
        :cell-style="{padding:'0px'}"
        :data="renwuList"
        :show-overflow-tooltip="true"
        border
        size:mini
        stripe
        style="font-size:7px;margin-top:20px;"
      >
        <el-table-column
          type="selection"
          width="55"
        ></el-table-column>
        <el-table-column
          label="企业名称"
          prop="customerName"
          width="100"
        ></el-table-column>
        <el-table-column
          label="任务名称"
          prop="BusinessNo,projectName"
          width="190"
        >
          <template slot-scope="scope">
            {{scope.row.BusinessNo}}
            <br />
            {{scope.row.projectName}}
          </template>
        </el-table-column>
        <el-table-column
          label="服务科目"
          prop="ServiceType"
        ></el-table-column>
        <el-table-column
          label="起止时间"
          prop="BegTime,EndTime"
        >
          <template slot-scope="scope">
            起:{{scope.row.BegTime}}
            <br />
            <p>止:{{scope.row.EndTime}}</p>
          </template>
        </el-table-column>
        <el-table-column
          label="金额（元）"
          prop="Amount"
          style="width:50px"
        ></el-table-column>
        <el-table-column
          label="可结算金额（元）"
          prop="CanSettlementAmount"
        ></el-table-column>
        <el-table-column
          label="任务状态"
          prop="Status"
        >
          <template slot-scope="scope">
            <span
              style="color:orange"
              v-if="scope.row.Status==0"
            >派单中</span>
            <span
              style="color:green"
              v-if="scope.row.Status==1"
            >已完结</span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              @click="checkbtn(scope.row)"
              type="text"
            >查看</el-button>
            <el-button type="text">充值</el-button>
            <br />
            <el-button type="text">审核</el-button>
            <el-button type="text">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <!-- 分页 -->
    <el-pagination
      :current-page="queryInfo.pagenum"
      :page-size="queryInfo.pagesize"
      :page-sizes="[1, 5, 10, 20,50,100]"
      :total="this.total"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      layout="total, sizes, prev, pager, next, jumper"
      style="margin-top:50px;"
    ></el-pagination>

    <!-- 查看按钮抽屉 -->
    <div style="height:550px;">
      <el-dialog
        :visible.sync="drawerSee"
        titile="查看详情"
        v-if="drawerSee"
        width="1000px"
      >
        <el-collapse
          accordion
          v-model="activeName"
        >
          <el-collapse-item
            name="1"
            title="任务基本信息"
          >
            <table
              border="1"
              cellspacing="0"
              class="table"
              style="width:800px;height:100px"
            >
              <tr>
                <td class="tab_tdfir">任务名称</td>
                <td>{{SeeList.projectName}}</td>
                <td class="tab_tdfir">起止日期</td>
                <td>{{this.SeeList.BegTime}} 至 {{this.SeeList.EndTime}}</td>
                <td class="tab_tdfir">任务地区</td>
                <td style="width:100px"></td>
              </tr>
              <tr>
                <td class="tab_tdfir">任务编号</td>
                <td>{{SeeList.BusinessNo}}</td>
                <td class="tab_tdfir">任务类型</td>
                <td>{{this.SeeList.ServiceType}}</td>
                <td class="tab_tdfir">任务预算(元)</td>
                <td>{{SeeList.Amount}}</td>
              </tr>
              <tr>
                <td class="tab_tdfir">可结算金额(元)</td>
                <td colspan="5">{{SeeList.CanSettlementAmount}}</td>
                <!-- <td class="tab_tdfir">状态</td>
              <td >
                <span style="color:orange">{{this.ChangState(this.SeeList.Status)}}</span>
                </td>-->
              </tr>
              <tr>
                <td class="tab_tdfir">工作内容</td>
                <td colspan="5">{{SeeList.WorkContent}}</td>
              </tr>
              <tr>
                <td class="tab_tdfir">灵工要求</td>
                <td colspan="5">{{SeeList.RecruitmentRequirements}}</td>
              </tr>
            </table>
          </el-collapse-item>
          <el-collapse-item
            name="2"
            title="充值信息"
          >
            <table
              border="1"
              cellspacing="0"
              class="table"
              style="width:800px;height:100px"
            >
              <tr></tr>
            </table>
          </el-collapse-item>
          <el-collapse-item
            name="3"
            title="接单信息"
          >
            <table
              border="1"
              cellspacing="0"
              class="table"
              style="width:800px;height:100px"
            >
              <tr></tr>
            </table>
          </el-collapse-item>
          <el-collapse-item
            name="4"
            title="结算信息"
          >
            <table
              border="1"
              cellspacing="0"
              class="table"
              style="width:800px;height:100px"
            >
              <tr></tr>
            </table>
          </el-collapse-item>
          <el-collapse-item
            name="5"
            title="发票信息"
          >
            <table
              border="1"
              cellspacing="0"
              class="table"
              style="width:800px;height:100px"
            >
              <tr></tr>
            </table>
          </el-collapse-item>
          <el-collapse-item
            name="6"
            title="操作记录"
          >
            <table
              border="1"
              cellspacing="0"
              class="table"
              style="width:800px;height:100px"
            >
              <tr></tr>
            </table>
          </el-collapse-item>
        </el-collapse>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      queryInfo: {
        pagesize: 8,
        pagenum: 1,
      },
      renwuList: [],
      total: 0,
      drawerSee: false,
      activeName: "1",
      SeeList: {
        projectName: "",
        BegTime: "",
        EndTime: "",
        BusinessNo: "",
        ServiceType: "",
        Amount: "",
        WorkContent: "",
        RecruitmentRequirements: "",
        CanSettlementAmount: "",
        Status: ""
      }
    };
  },
  created(){
    this.getList();
  },
  methods: {
    // 页面初始化加载表格数据
    async  getList(){
      const{ data: res } = await this.$http.get("/api/ServiceProject/GetList", { pagesize: this.queryInfo.pagesize, page: this.queryInfo.pagenum });
      this.renwuList = res.Data;
      this.total = res.TotalCount;
      console.log(res);
    },
    handleCurrentChange(newsize){
      this.queryInfo.pagenum = newsize;
      this.getList();
    },
    handleSizeChange(newpage){
      this.queryInfo.pagesize = newpage;
      this.getList();
    },
    async  checkbtn(rowdata){
      this.drawerSee = true;
      console.log(rowdata.ID);
      const{ data: res } = await this.$http.get(`/api/ServiceProject/GetModel/${rowdata.ID}`);
      this.SeeList = res.Data;
      this.SeeList.CanSettlementAmount = rowdata.CanSettlementAmount;
      this.SeeList.Status = rowdata.stateid;
      console.log(res);
    },
    ChangState(stateid){
      if(stateid == 0){
        console.log("派发");
        return "派发中";

      }else if(stateid == 1){
        return"已完结";
      }
    }

  }
};
</script>

<style lang="less" scoped>
.el-table .cell {
  white-space: pre-line;
}
.tab_tdfir {
  font-size: 15px;
  font-weight: bold;
}
table {
  border-collapse: collapse;
  margin: 0 auto;
}
table td {
  height: 50px;
  border: 1px solid #cad9ea;
  color: #666;
}
table tr:nth-child(odd) {
  background: #fff;
}
table tr:nth-child(even) {
  background: #f5fafa;
}
</style>
